<script setup lang="ts">
  import { computed } from 'vue'

  import { fullUrl } from '@/utils/common'
  import type { categoryPanelItem } from '@/types/home'
  import { pageUrl } from '@/utils/constants'

  const props = defineProps<{
    list : categoryPanelItem[]
  }>()

  const change = (event : UniHelper.UniGridOnChangeEvent) => {
    uni.setStorageSync('activeCategoryIndex', event.detail.index)
    uni.switchTab({
      url: pageUrl['category'],
    })
  }
  const gotoType = (index) => {
    uni.setStorageSync('activeCategoryIndex', index)
    uni.switchTab({
      url: pageUrl['category'],
    })
  }
</script>
<template>
  <swiper v-if="props.list.length > 0" class="swiper" circular :indicator-dots="true" :autoplay="true" :interval="2000"
    :duration="500">
    <swiper-item v-for="(item, index) in list" :key="item.id" @click="gotoType(index)">
      <!-- <navigator class="list-item" :url="`${pageUrl['category']}?activeType=${index}`"> -->
        <view class="swiper-item uni-bg-red" :style="{'background-image': `url(${item.icon})`}">
          <text class="text">{{ item.name }}</text>
        </view>
      <!-- </navigator> -->
    </swiper-item>
  </swiper>
</template>

<style lang="scss" scoped>
  .swiper {
    background-color: white;
  }

  .text {
    font-size: 24rpx;
    margin-top: 15rpx;
    color: #000;
    font-weight: bold;
  }

  .swiper {
    height: 300rpx;
  }

  .swiper-item {
    background-size: 100% 300rpx;
    height: 300rpx;
    text-align: center;
    background-repeat: no-repeat;
  }

  .grid-dynamic-box {
    margin-bottom: 10rpx;
  }

  .grid-item-box {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10rpx 0;
  }

  .grid-item-box-row {
    flex: 1;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 10rpx 0;
  }

  .grid-dot {
    position: absolute;
    top: 5rpx;
    right: 15rpx;
  }
</style>
